<template>
  <div class="screen-theme-area">
    <div class="changeBgEntry">
      <div class="text">大屏背景</div>
      <div class="btnGroup">
        <div class="select-bg-button" @click="showUploadBgDialog"><i class="el-icon-plus"></i>&nbsp;自选</div>
        <div class="select-bg-button" @click="showThemeStoreDialog"><i class="el-icon-plus"></i>&nbsp;素材</div>
        <div class="delete-storechoose" @click="cancelStoreChoose" v-if="videoPreviewPath">取消上传</div>
      </div>
      <div class="isLS">
        <el-select v-model="isLS" @change="handleBdModelSelectChange" class="lsSelect">
          <el-option v-for="item in bgModelList" :key="item.id" :label="item.label" :value="item.id"></el-option>
        </el-select>
      </div>
    </div>
    <div class="preview-area">
      <img src="@/assets/image/pc-theme.png" class="lapTopImg" />
      <video class="previewVideo" autoplay="autoplay" loop="loop" muted="muted" v-if="videoPreviewPath">
        <source :src="videoPreviewPath" type="video/mp4" />
        <source :src="videoPreviewPath" type="video/webm" />
      </video>
      <el-carousel class="carouselWrap" trigger="click" height="100%" v-show="!videoPreviewPath">
        <el-carousel-item v-for="item in screenBgList" :key="item.id">
          <div class="modelBg" :style="{ backgroundImage: 'url(' + item.url + ')' }" v-if="isLS === '2'"></div>
          <div
            class="carouselImg"
            :style="{ backgroundImage: 'url(' + item.url + ')' }"
            :class="{ LS: isLS === '1', DBSF: isLS === '2' }"
          ></div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 上传弹出区域 -->
    <transition
      enter-active-class="animate__animated animate__faster animate__fadeIn"
      leave-active-class="animate__animated animate__faster animate__fadeOut"
    >
      <div class="themeUploadPopArea" v-show="isThemeUploadPop">
        <div class="screenThemeUploadBox">
          <div class="head">
            <div class="name">大屏主题自定义</div>
            <img src="@/assets/image/close.png" class="closeIcon" @click="closeThemeUploadPop" />
          </div>
          <div class="content">
            <div class="upload-img-wrap">
              <!-- 上传图片 -->
              <el-upload
                drag
                action
                multiple
                :http-request="handleBgFile"
                :file-list="fileList"
                list-type="picture"
                :on-remove="handleRemove"
                :show-file-list="true"
                class="uploadImg"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将图片拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif/mp4文件，且不超过20M</div>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 素材弹出区域 begin-->
    <transition
      enter-active-class="animate__animated animate__faster animate__fadeIn"
      leave-active-class="animate__animated animate__faster animate__fadeOut"
    >
      <div class="themeStorePopArea" v-show="isThemeStorePop" v-loading="isLoading">
        <div class="screenThemeStoreBox">
          <div class="head">
            <div class="name">背景设置</div>
            <img src="@/assets/image/close.png" class="closeIcon" @click="closeThemeStoreDialog" />
          </div>
          <div class="content">
            <div class="radioWrap">
              <el-radio-group v-model="bgTypeVal" v-show="false">
                <el-radio :label="0">图片</el-radio>
                <el-radio :label="1">视频</el-radio>
              </el-radio-group>
            </div>
            <div class="ct">
              <div class="uploadImgWrap" v-show="bgTypeVal == 0">
                <div class="imgItem" v-for="item in storeImgList" :key="item.id">
                  <img :src="item.imgPath" />
                  <el-radio :label="item.id" v-model="choosedImgId"></el-radio>
                </div>
              </div>
              <div class="uploadImgWrap" v-show="bgTypeVal == 1">
                <div class="imgItem" v-for="item in storeVideoList" :key="item.id">
                  <img :src="item.coverPath" />
                  <el-radio :label="item.id" v-model="choosedVideoId"></el-radio>
                </div>
              </div>
            </div>
            <div class="note">注：当视频素材与图片素材同时存在时，视频素材会覆盖图片素材。</div>
            <div class="btnGroup2">
              <div class="btn confirm" @click="confirmStoreChoose">确认</div>
              <div class="btn cancel" @click="closeThemeStoreDialog">取消</div>
            </div>
          </div>
        </div>
      </div>
    </transition>
    <!-- 素材弹出区域 end-->
  </div>
</template>
<script>
import request from '@/utils/request';
import { getScreenList } from '@/api/setting/activitySetting/theme';

export default {
  name: 'screenTheme',
  data() {
    return {
      isLoading: false,
      // 是否显示大屏主题弹框
      isThemeUploadPop: false,
      // 图片对象
      bgFile: '',
      fileList: [],
      screenBgList: [],
      isThemeStorePop: false,
      bgTypeVal: 1, // 0图片、1视频
      choosedImgId: '',
      choosedVideoId: '',
      videoPreviewPath: '',
      videoPreviewId: '',
      storeImgList: [],
      storeVideoList: [],
      isLS: '0',
      bgModelList: [
        {
          id: '0',
          label: '铺满',
        },
        {
          id: '1',
          label: '拉伸',
        },
        {
          id: '2',
          label: '等比例缩放',
        },
      ],
    };
  },
  created() {
    this.requestScreenBgList();
  },
  methods: {
    showUploadBgDialog() {
      this.isThemeUploadPop = true;
    },
    closeThemeUploadPop() {
      this.isThemeUploadPop = false;
    },
    showThemeStoreDialog() {
      this.isThemeStorePop = true;
    },
    closeThemeStoreDialog() {
      this.isThemeStorePop = false;
    },
    confirmStoreChoose() {
      console.log(this.choosedVideoId);
      if (!this.choosedVideoId) {
        this.$message.error('请选择一个视频!');
        return;
      }
      const tmpVideoInfo = this.storeVideoList.find((item) => item.id === this.choosedVideoId);
      this.requestUploadMaterialImg(tmpVideoInfo.videoPath, 'MiaoMp4');
      this.closeThemeStoreDialog();
      // else if (this.videoPreviewId) {
      //   this.$message.error('请先取消视频上传!');
      // } else {
      //   this.$message.error('请选择一个视频!');
      // }
    },
    cancelStoreChoose() {
      if (this.bgTypeVal === 0) {
        // const tmpImgInfo = this.storeImgList.find((item) => item.id === this.choosedImgId);
        this.handleRemove({
          id: this.choosedImgId,
          // url: tmpImgInfo.imgPath,
        });
      } else if (this.bgTypeVal === 1) {
        if (this.videoPreviewId) {
          this.handleRemove({
            id: this.videoPreviewId,
          });
          this.closeThemeStoreDialog();
        } else {
          this.$message.error('先确认上传一个视频!');
        }
      }
    },
    handleRemove(file) {
      const params = {
        id: file.id,
        // url: file.url,
      };
      request
        .post('/beiJing/removePcBeiJing', params)
        .then((res) => {
          console.log(res);
          this.$message({
            message: '删除成功!',
            type: 'success',
          });
          this.requestScreenBgList();
          for (let i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].id === params.id) {
              this.fileList.splice(i, 1);
              break;
            }
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('删除失败!');
        });
    },
    handleBgFile(e) {
      console.log(e);
      if (e.file.size > 21000000) {
        this.$message.error('上传图片不超过20M!');
        return;
      }
      if (!(e.file.type === 'image/jpeg' || e.file.type === 'image/png' || e.file.type === 'image/gif' || e.file.type === 'video/mp4')) {
        this.$message.error('上传图片只能是jpg或png或gif或mp4格式');
        return;
      }
      console.log('打印图片');
      console.log(e.file);
      this.bgFile = e.file;
      this.requestUploadImg();
    },
    // 保存素材
    requestUploadMaterialImg(filePath, type) {
      const params = {
        splid: this.$store.state.liveId,
        piclink: filePath,
        type,
      };
      request
        .post('/beiJing/savePcBeiJing', params)
        .then((res) => {
          if (type === ' MiaoBack') {
            this.$message({
              message: '背景图上传成功!',
              type: 'success',
            });
            this.fileList.unshift({
              name: res.data.info.picname,
              id: res.data.info.id,
              url: res.data.info.piclink,
            });
          } else if (type === 'MiaoMp4') {
            this.$message({
              message: '背景视频上传成功!',
              type: 'success',
            });
            // this.videoPreviewPath = res.data.info.piclink;
            // this.requestScreenBgList();
            window.location.reload();
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('背景图上传失败!');
        });
    },
    // 走后台上传
    requestUploadImg() {
      const formData = new FormData();
      formData.append('file', this.bgFile);
      request
        .post('/beiJing/shangchuanTomcat', formData)
        .then((res) => {
          console.log('上传主题图片的图片地址', res);
          if (this.bgFile.type === 'video/mp4') {
            this.requestUploadMaterialImg(res.data.filePath, 'MiaoMp4');
          } else {
            const params = {
              splid: this.$store.state.liveId,
              piclink: res.data.filePath,
              type: 'MiaoBack',
            };
            request
              .post('/beiJing/savePcBeiJing', params)
              .then((res) => {
                this.$message({
                  message: '背景图上传成功!',
                  type: 'success',
                });
                this.fileList.unshift({
                  name: res.data.info.picname,
                  id: res.data.info.id,
                  url: res.data.info.piclink,
                });
                console.log('pic-unload', res);
                this.requestScreenBgList();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error('背景图上传失败!');
              });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取轮播图数据
    requestScreenBgList() {
      this.fileList.splice(0);
      this.screenBgList.splice(0);
      const params = {
        splid: this.$store.state.liveId,
      };
      getScreenList({ params })
        .then((res) => {
          console.log(res);
          if (res.data.list_back.length > 0) {
            for (let i = 0; i < res.data.list_back.length; i++) {
              this.fileList.push({
                name: res.data.list_back[i].picname,
                id: res.data.list_back[i].id,
                url: res.data.list_back[i].piclink,
              });
              this.screenBgList.push({
                name: res.data.list_back[i].picname,
                id: res.data.list_back[i].id,
                url: res.data.list_back[i].piclink,
              });
            }
          }
          if (res.data.list_mp4.length > 0) {
            this.videoPreviewPath = res.data.list_mp4[0].piclink;
            this.videoPreviewId = res.data.list_mp4[0].id;
          } else {
            this.videoPreviewPath = '';
            this.videoPreviewId = '';
          }
          if (res.data.systemWallpaper && res.data.systemWallpaper.list1.length > 0 && res.data.systemWallpaper.list2.length > 0) {
            this.storeImgList = res.data.systemWallpaper.list1.map((item) => {
              return {
                imgPath: item.bg_link,
                id: item.id,
              };
            });
            this.storeVideoList = res.data.systemWallpaper.list2.map((item) => {
              return {
                videoPath: item.bg_link,
                coverPath: item.cover_url,
                id: item.id,
              };
            });
          }
          console.log('screenBgList', this.screenBgList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleBdModelSelectChange(e) {
      this.isLS = e;
      console.log(this.isLS);
      this.updateLS(this.isLS);
    },
    updateLS(e) {
      console.log(e);
      request
        .post('/qiYeNe/update', {
          splid: this.$store.state.liveId,
          draw_switch: e,
        })
        .then(() => {
          this.$message({
            message: '修改成功!',
            type: 'success',
          });
          this.$store.commit('login/updateIsScreenBgLS', e);
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('图片上传失败!');
        });
    },
  },
};
</script>
<style lang="less" scoped>
.screen-theme-area {
  width: 43%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .preview-area {
    width: 97%;
    position: relative;
    transform: scale(0.85);
    .lapTopImg {
      width: 100%;
      height: auto;
    }
    .previewVideo {
      position: absolute;
      width: 94%;
      height: 60%;
      top: 4%;
      left: 50%;
      transform: translateX(-50%);
    }
    .carouselWrap {
      position: absolute;
      width: 94%;
      height: 59%;
      top: 4%;
      left: 50%;
      transform: translateX(-50%);
      .modelBg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: 0;
        filter: blur(8px);
      }
      .carouselImg {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        &.LS {
          background-size: 100% 100%;
        }
        &.DBSF {
          background-size: contain;
        }
      }
    }
  }
  .changeBgEntry {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -3px;
    position: relative;
    z-index: 1;
    .text {
      font-size: 15px;
    }
    .btnGroup {
      display: flex;
      width: 250px;
      .select-bg-button {
        margin-left: 20px;
        cursor: pointer;
        font-size: 13px;
        color: #3694f1;
        text-align: center;
        width: 67px;
        height: 26px;
        line-height: 26px;
        border-radius: 3px;
        border: dashed 1px #3694f1;
        margin: 10px auto;
      }
      .delete-storechoose {
        color: #409eff;
        font-size: 14px;
        cursor: pointer;
        margin-left: -7px;
        line-height: 45px;
      }
    }
    .isLS {
      display: flex;
      position: absolute;
      right: -78px;
      top: -15px;
      width: 138px;
      flex-direction: column;
    }
  }
}
/* 上传弹出区域 */
.themeUploadPopArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
  .screenThemeUploadBox {
    width: 59%;
    height: 66%;
    background-color: #ffffff;
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 320px;
    min-height: 280px;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 12px 14px;
    .head {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 5%;

      .name {
        font-size: 14px;
        font-weight: 600;
        color: rgba(165, 165, 165, 1);
      }

      .closeIcon {
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      height: 88%;
      margin-top: 24px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 10px;
      }
      &::-webkit-scrollbar-track {
        box-shadow: inset 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.1);
        box-shadow: inset 6px rgba(0, 0, 0, 0.5);
      }
      &::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(0, 0, 0, 0.3);
      }
      .uploadImg::v-deep {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .el-upload-list--picture .el-upload-list__item {
          padding: 0;
          width: 169px;
          height: 92px;
          float: left;
          margin-right: 30px;
          &.is-ready {
            display: none;
          }
        }
        .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name {
          display: none;
        }
        .el-upload-list--picture .el-upload-list__item-thumbnail {
          width: 167px;
          height: 95px;
          margin-left: 0px;
        }
        .el-upload-list--picture .el-upload-list__item-status-label {
          z-index: 1;
        }
        .el-upload-list__item .el-icon-close {
          color: black;
          z-index: 1;
        }
        .el-upload-list--text {
          display: none;
        }
      }
    }
  }
}

.themeStorePopArea {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
  .screenThemeStoreBox {
    width: 61%;
    height: 64.4%;
    background-color: #ffffff;
    position: absolute;
    top: 18.3%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 21px;
    box-sizing: border-box;
    padding: 12px 13px;
    min-height: 480px;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 5%;
      padding: 0 15px;
      margin-bottom: 2%;
      .name {
        font-size: 18px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
      }
      .closeIcon {
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      height: 90%;
      .radioWrap::v-deep {
        display: flex;
        justify-content: center;
        .el-radio-group {
          .el-radio__input {
            margin-top: -5px;
            .el-radio__inner {
              width: 18px;
              height: 18px;
              background-color: #fff;
              padding: 8px;
              &::after {
                width: 12px;
                height: 12px;
              }
            }
            &.is-checked {
              .el-radio__inner {
                &::after {
                  background-color: #409eff;
                }
              }
            }
          }
          .el-radio__label {
            font-size: 18px;
          }
        }
      }
      .ct {
        margin-top: 2%;
        height: 65%;
        overflow-y: scroll;
        .uploadImgWrap {
          display: flex;
          flex-wrap: wrap;
          .imgItem {
            width: 22%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 4%;
            margin-bottom: 2.5vw;
            img {
              width: 100%;
              height: 147px;
              margin-bottom: 14px;
            }
            &:nth-child(4n) {
              margin-right: 0;
            }
          }
        }
        .uploadVideoWrap {
        }
        &::-webkit-scrollbar {
          width: 10px;
        }
        &::-webkit-scrollbar-track {
          box-shadow: inset 6px rgba(0, 0, 0, 0.3);
          border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          background-color: rgba(0, 0, 0, 0.1);
          box-shadow: inset 6px rgba(0, 0, 0, 0.5);
        }
        &::-webkit-scrollbar-thumb:window-inactive {
          background: rgba(0, 0, 0, 0.3);
        }
      }
      .note {
        width: 100%;
        text-align: center;
        font-size: 16px;
        color: #6f7682;
        margin-top: 20px;
      }
      .btnGroup2 {
        display: flex;
        justify-content: center;
        margin-top: 18px;
        .btn {
          width: 140px;
          height: 42px;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          &.confirm {
            background: #249aff;
            margin-right: 150px;
          }
          &.cancel {
            background: #64676b;
          }
        }
      }
    }
  }
}
</style>
